<template>
  <div>
    <!-- 添加用户对话框 -->
    <el-dialog :title="userForm.id ? '修改用户' : '添加用户'"
      :visible.sync="dialogVisible"
      width="40%"
      @close="resetForm">
      <el-form
        :model="userForm"
        label-width="70px"
        ref="userFormRef"
        :rules="userFormRules">
        <el-input v-model="userForm.id" type="hidden" v-if="userForm.id"></el-input>
        <el-form-item label="用户名" :prop="userForm.id ? '' : 'username'">
          <el-input v-model="userForm.username"
            autocomplete="off"
            :disabled="!!userForm.id"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!userForm.id">
          <el-input v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="userForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="!userForm.id ? addUser() : editUser()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqAddUser, reqEditUser } from '../../api'

export default {
  name: 'user-dialog-form',
  props: {
    userForm: { type: Object, required: true },
    dialogVisible: { type: Boolean, required: false },
    // 点击取消，隐藏对话框
    hideDialog: { type: Function },
    getUserPage: { type: Function },
    resetUserForm: { type: Function }
  },
  data() {
    // 验证邮箱规则
    const checkEmail = (rule, value, callback) => {
      const regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
      // 合法
      if (regEmail.test(value)) {
        return callback()
      }
      // 不合法
      callback(new Error('请输入合法的邮箱'))
    }

    // 验证手机号规则
    const checkMobile = (rule, value, callback) => {
      const regMobile = /^1(3|4|5|7|8)\d{9}$/
      // 合法
      if (regMobile.test(value)) {
        return callback()
      }
      // 不合法
      callback(new Error('请输入合法的手机号'))
    }

    return {
      // 用户表单信息规则
      userFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 添加用户
    addUser() {
      this.$refs.userFormRef.validate(async valid => {
        if (!valid) return
        // 发送请求，添加用户
        const { username, password, email, mobile } = this.userForm
        const { meta } = await reqAddUser({ username, password, email, mobile })
        // 显示失败信息
        if (meta.status !== 201) return this.$message.error(meta.msg)
        // 将对话框隐藏
        this.hideDialog()
        // 显示成功信息
        this.$message.success(meta.msg)
        // 刷新列表
        this.getUserPage()
      })
    },
    // 对话框关闭，重置表单
    resetForm() {
      this.$refs.userFormRef.resetFields()
      this.resetUserForm()
    },
    // 修改用户
    editUser() {
      this.$refs.userFormRef.validate(async valid => {
        if (!valid) return
        // 发送请求，修改用户
        const { id, email, mobile } = this.userForm
        const { meta } = await reqEditUser({ id, email, mobile })
        if (meta.status !== 200) return this.$message.error(meta.msg)
        // 将对话框隐藏
        this.hideDialog()
        // 显示成功信息
        this.$message.success(meta.msg)
        // 刷新列表
        this.getUserPage()
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
